


<template>
  <div>
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <h3>学生：{{ sname }}</h3>
  </div>
</template>

<script>
// 全局事件总线：任意组件间通信
// 	1）在main.js中定义$bus
// 		new Vue({
//   			render: h => h(App),
//   			beforeCreate() {
//    			 Vue.prototype.$bus = this //安装全局事件总线
//  			 },
// 		}).$mount('#app')
// 	2）谁收数据谁定义
// 		 mounted() {
//    			 this.$bus.$on("hello", (data) => {
//       				this.name = data;
//       				console.log("我是school组件，我收到了数据", data);
//    			 });
//  		 },
//  		 beforeDestory() {
//    			 this.$bus.$off("hello");
//  		 },
//   	3）谁发数据谁触发
//   		  methods: {
//     			sendStudentName() {
//     			  	this.$bus.$emit("hello", this.name);
//   				  },
//  			 },

export default {
  name: "School",
  data() {
    return {
      name: "HPU",
      address: "河南焦作",
      sname: "",
    };
  },
  mounted() {
    this.$bus.$on("hello", (data) => {
      console.log(data);
      this.sname = data;
    });
  },
  beforeDestroy() {
    //注意在最后解绑事件
    this.$bus.$off("hello");
  },
};
</script>

<style scoped>
div {
  background: #f40;
  margin: 30px;
}
</style>